<template>
	<view class="content">
		<view class="status_bar" style="background-color: #FFF;">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 0 16rpx;background-color: #FFF;" >
			<view style="box-sizing: border-box;width: 130rpx;">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
			</view>
			
			<view style="line-height: 68rpx;color: #232426;font-size: 32rpx;font-weight: 500;box-sizing: border-box;width: 130rpx;">
				編輯位置
			</view>
			<view style="width: 130rpx;"></view>
		</view>
		<view class="body">
			<view class="left-colum">
				<view class="left-colum-title">國家</view>
				<view class="left-colum-list">
					<view v-for="(item, index) in cityList" :key="index" >
						<view class="left-colum-item" :class="{active:item.id == countryId }" @click="checkCountry(item.id)">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="right-colum">
				<view class="right-colum-title">城市</view>
				<view class="right-colum-list">
					<view v-for="(item, index) in cityList" :key="index">
						<view v-for="(item_, index_) in item.citys" v-show="item.id == countryId" :key="index_">
							<view class="right-colum-item"  @click="checkCity(item_.id,item_.title)">
								<view class="right-colum-item-title" :class="{active:checkExistInSimpleArray(item_.id)}">{{item_.title}}</view>
								<u-image
									v-if="checkExistInSimpleArray(item_.id)"
									src="/static/images/icon/success-solid.png"
									width="48rpx"
									height="48rpx"
								></u-image>
								<view v-else class="right-colum-item-radio"></view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAllCountriesWithCities } from '@/config/api.js';
	
	export default {
		data() {
			return {
				lang:'zh_tw',
				countryId:0,
				cityId:0,
				country:'台灣',
				city:'台北',
				cityList:[],
				cityRes:[],
				cityNamesRes:[],
				type:1
			}	
		},
		onLoad(option) {
			uni.showLoading({
				title:'Loading',
				icon:'none'
			})
			this.type = option.type;
			this.getLoadData()
		},
		methods: {
			getLoadData(){
				let that = this;
				let data = {
					params:{}
				}
				getAllCountriesWithCities(data).then((res) => {
					let resData = [];
					for( const obj in res ){
						
						let cityObj = [];
						
						for( const ob in res[obj].cities ){
							
							let reset = {
								id:res[obj].cities[ob].id,
								title:res[obj].cities[ob].title,
							}
							
							cityObj.push(reset);
						}
						
						let countryObj = {
							id:res[obj].id,
							title:res[obj].title,
							citys:cityObj
						}
						
						resData.push(countryObj);
					}
					
					console.log(resData);
					that.cityList = resData;
					uni.hideLoading();
				}).catch(() =>{
					
				})
			},
			checkCountry(id){
				this.countryId = id;
				this.cityRes = [];
			},
			checkCity(id,title){
				this.cityId = id;
				if(this.cityRes.includes(id)){
					const index = this.cityRes.findIndex(item => item === id);
					if (index !== -1) {
					    this.cityRes.splice(index, 1);
					    this.cityNamesRes.splice(index, 1);
					}
				} else {
					if( this.type == 2 && this.cityRes.length > 0 ){
						uni.showToast({
							title:"只能選擇一個區域",
							icon:'none'
						})
						return;
					}
					this.cityRes.push(id);
					this.cityNamesRes.push(title);
				}
			},
			//检查基本类型数组
			checkExistInSimpleArray(id) {
				return this.cityRes.includes(id);
			},
			goBack(){
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptData', { city: this.cityRes,name:this.cityNamesRes }); // 发送数据
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		
		.header{
			margin: 0 auto 10rpx;
			display: flex;
			justify-content: space-between;
			padding: 70rpx 60rpx 20rpx;
			background-color: #FFF;
			
			.header-site{
				.header-site-title{
					color: #808690;
					font-size: 22rpx;
				}
				.header-site-info{
					color: #232426;
					font-size: 32rpx;
					margin-top: 20rpx;
					font-weight: 500;
				}
			}
			.header-btn{
				display: flex;
				justify-content: center;
				border: 2rpx solid #E5E6E8;
				box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.02);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				height: 68rpx;
				width: 238rpx;
				
				.header-btn-image{
					margin: 18rpx 10rpx 0;
				}
				.header-btn-title{
					font-size: 28rpx;
					color: #232426;
					font-weight: 400;
					line-height: 68rpx;
				}
			}
			
		}
		.body{
			background-color: #FFF;
			width: 100%;
			display: flex;
			justify-content: space-between;
			
			.left-colum{
				width: 50%;
				padding: 15rpx 0;
				
				
				.left-colum-title{
					font-weight: 400;
					font-size: 22rpx;
					color: #808690;
					text-align: left;
					padding: 12rpx 60rpx;
				}
				.left-colum-list{
					background-color: #F6F8FA;
					
					.left-colum-item{
						font-size: 28rpx;
						color: #232426;
						text-align: left;
						height: 120rpx;
						line-height: 120rpx;
						padding: 0 60rpx;
					}
					
					.active{
						background-color: #FFF;
						color: #1AAEC0;
					}
				}
			}
			.right-colum{
				width: 50%;
				padding: 15rpx 0;
				
				.right-colum-title{
					font-weight: 400;
					font-size: 22rpx;
					color: #808690;
					text-align: left;
					padding: 12rpx 60rpx;
				}
				.right-colum-list{
					
					.right-colum-item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 60rpx;
						
						.right-colum-item-title{
							font-size: 28rpx;
							color: #232426;
							text-align: left;
							height: 120rpx;
							line-height: 120rpx;
						}
						.right-colum-item-radio{
							border-radius: 50%;
							width: 48rpx;
							height: 48rpx;
							background-color: #E5E6E8;
						}
						.active{
							background-color: #FFF;
							color: #1AAEC0;
						}
					}
				}
			}
		}
	}
</style>
